<!DOCTYPE html>
<html>
<head>
    <title>Parallel Plate Waveguide</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Main Drawing Function ---
        function drawWaveguide() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Parameters
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2 - 20; // Shift up to make space for caption
            const a = 140; // Separation distance
            const plateLength = 320;
            const axisLength = 60;
            const arrowSize = 7;
            const mainLineWidth = 3;
            const hatchLineWidth = 2;
            const hatchSpacing = 15;
            const hatchSize = 8;


            // --- Helper Function to draw arrows ---
            function drawArrow(x, y, angle) {
                ctx.save();
                ctx.translate(x, y);
                ctx.rotate(angle);
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(-arrowSize, arrowSize / 2);
                ctx.moveTo(0, 0);
                ctx.lineTo(-arrowSize, -arrowSize / 2);
                ctx.stroke();
                ctx.restore();
            }

            function drawFilledArrow(x, y, angle) {
                ctx.save();
                ctx.translate(x, y);
                ctx.rotate(angle);
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.lineTo(-arrowSize, arrowSize / 2);
                ctx.lineTo(-arrowSize, -arrowSize / 2);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            }

            // --- Draw Plates ---
            const yTop = centerY - a / 2;
            const yBottom = centerY + a / 2;
            const plateStartX = centerX - plateLength / 2;
            const plateEndX = centerX + plateLength / 2;
            
            ctx.lineWidth = mainLineWidth;

            // Top plate line
            ctx.beginPath();
            ctx.moveTo(plateStartX, yTop);
            ctx.lineTo(plateEndX, yTop);
            ctx.stroke();

            // Bottom plate line
            ctx.beginPath();
            ctx.moveTo(plateStartX, yBottom);
            ctx.lineTo(plateEndX, yBottom);
            ctx.stroke();
            
            // --- Draw Hatching ---
            ctx.lineWidth = hatchLineWidth;
            // Top plate hatching (up and left)
            for (let x = plateStartX; x <= plateEndX; x += hatchSpacing) {
                ctx.beginPath();
                ctx.moveTo(x, yTop);
                ctx.lineTo(x - hatchSize, yTop - hatchSize);
                ctx.stroke();
            }

            // Bottom plate hatching (down and left)
            for (let x = plateStartX; x <= plateEndX; x += hatchSpacing) {
                ctx.beginPath();
                ctx.moveTo(x, yBottom);
                ctx.lineTo(x - hatchSize, yBottom + hatchSize);
                ctx.stroke();
            }


            // --- Draw Dimension 'a' ---
            const dimX = plateStartX - 40;
            ctx.lineWidth = 1.5;
            
            // Vertical line
            ctx.beginPath();
            ctx.moveTo(dimX, yTop);
            ctx.lineTo(dimX, yBottom);
            ctx.stroke();

            // Arrows for dimension line
            drawFilledArrow(dimX, yTop, -Math.PI / 2); // Up
            drawFilledArrow(dimX, yBottom, Math.PI / 2); // Down

            // Label 'a'
            ctx.font = '20px serif';
            ctx.fillText('a', dimX - 15, centerY);


            // --- Draw Coordinate System ---
            const originX = centerX;
            const originY = centerY;
            ctx.lineWidth = 2;

            // Z-axis (up)
            ctx.beginPath();
            ctx.moveTo(originX, originY);
            ctx.lineTo(originX, originY - axisLength);
            ctx.stroke();
            drawArrow(originX, originY - axisLength, -Math.PI / 2);
            ctx.font = 'bold 20px serif';
            ctx.fillText('z', originX, originY - axisLength - 12);
            
            // X-axis (right)
            ctx.beginPath();
            ctx.moveTo(originX, originY);
            ctx.lineTo(originX + axisLength, originY);
            ctx.stroke();
            drawArrow(originX + axisLength, originY, 0);
            ctx.fillText('x', originX + axisLength + 10, originY);

            // Y-axis (diagonal)
            const yAngle = -Math.PI / 4; // 45 degrees up and right
            const yAxisEndX = originX + axisLength * Math.cos(yAngle);
            const yAxisEndY = originY + axisLength * Math.sin(yAngle);
            ctx.beginPath();
            ctx.moveTo(originX, originY);
            ctx.lineTo(yAxisEndX, yAxisEndY);
            ctx.stroke();
            drawArrow(yAxisEndX, yAxisEndY, yAngle);
            ctx.fillText('y', yAxisEndX + 8, yAxisEndY - 8);


            // --- Draw Caption ---
            ctx.font = 'bold 24px serif';
            ctx.fillText('Fig. 5.14', centerX, canvas.height - 30);
        }

        // Initial draw
        drawWaveguide();
    </script>
</body>
</html>